.home {
    height: calc(100% - 0.8rem);
    padding-top: .74rem;
  }
  
  .container-bg {
    width: 100%;
    height: calc(100% - .8rem);
    display: block;
    position: absolute;
    top: .8rem;
    left: 0;
    z-index: -1;
  }
  
  .container {
    height: 100%;
    display: flex;
    text-align: center;
    overflow: hidden;
  
    .left, .right {
      width: 26.14%;
      padding-left: .2rem;
      margin-top: .34rem;
  
      .item {
        width: 100%;
        height: 2.5rem;
        box-sizing: border-box;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
  
        .item-title {
          position: absolute;
          top: .1rem;
          left: 50%;
          transform: translateX(-50%);
          color: #20e8fb;
          font-size: .12rem;
        }
  
        .circle-chart {
          height: 100%;
          width: 100%;
          padding: .4rem .3rem .3rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .donut-chart {
            z-index: 2;
            position: relative;
            width: 1.4rem;
            height: 1.4rem;
            // margin: .55rem auto
            border-radius: 100;
  
            .progress-circle {
              width: 100%;
              height: 100%;
              background: #002644;
              border-radius: 50%;
              border: 1px solid #3dd4d3;
              box-sizing: border-box;
              position: relative;
  
              circle {
                stroke-width: .08rem;
                // stroke-width表示环形的宽度
                transform-origin: center;
  
                // 中心旋转
                &.progress-background {
                  transform: scale(0.9);
                  stroke: #04283c;
                }
  
                &.progress-bar {
                  transform: scale(0.9) rotate(-90deg);
                  stroke: #3dd4d3;
                }
              }
  
              .equipment-info {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #107194;
                font-size: .12rem;
  
                .rate {
                  height: .4rem;
                  line-height: .4rem;
                  font-size: .18rem;
                  font-weight: 500;
                  color: #10eceb;
  
                  span:nth-of-type(2) {
                    color: #107194;
                    font-size: .12rem;
                  }
                }
              }
            }
  
            .center {
              background: #002644;
              border-radius: 50%;
              width: 70%;
              height: 70%;
              left: 15%;
              top: 15%;
              position: absolute;
  
              a {
                color: #2ACBF8;
                display: block;
                font-size: .24rem;
                font-weight: 600;
                left: 50%;
                position: absolute;
                top: 40%;
                transform: translate(-50%, -50%);
  
                small {
                  font-size: .14rem;
                }
              }
  
              p {
                font-size: .14rem;
                color: #9B9B9B;
                left: 50%;
                position: absolute;
                bottom: 20%;
                transform: translate(-50%, -50%);
              }
            }
  
            .clip {
              border-radius: 50%;
              clip: rect(0px 1.4rem 1.4rem .7rem);
              height: 100%;
              position: absolute;
              width: 100%;
  
              .p-item {
                border-radius: 50%;
                clip: rect(0px .7rem 1.4rem 0px);
                height: 100%;
                position: absolute;
                width: 100%;
              }
            }
  
            #section-one {
              transform: rotate(0deg);
  
              .p-item {
                background-color: #09effb;
                transform: rotate(180deg);
                transition: 1s;
              }
            }
  
            #section-two {
              transform: rotate(180deg);
  
              .p-item {
                background-color: #04283c;
                transform: rotate(180deg);
                transition: 1s;
              }
            }
          }
  
          .tab-list {
            position: relative;
            left: -.4rem;
            .tab-item {
              width: 1.1rem;
              height: .3rem;
              line-height: .3rem;
              text-align: right;
              font-size: .12rem;
              color: #196576;
              border: 1px solid #00343f;
              padding-right: 0 !important;
              // border 1px solid #359093
              box-sizing: border-box;
              cursor: pointer;
              .btns {
                line-height: .3rem;
                height: .3rem;
                margin-left: .1rem;
                .el-switch__core {
                  width: .4rem;
                  height: .2rem;
                }
              }
            }
  
            .tab-item:nth-of-type(1), .tab-item:nth-of-type(4) {
              padding-right: .1rem;
            }
  
            .tab-item:nth-of-type(2), .tab-item:nth-of-type(3) {
              padding-right: .34rem;
            }
  
            .active {
              border: 2px solid #318f93;
            }
          }
        }
  
        .item-images {
          padding-top: .4rem;
          padding-left: .3rem;
          box-sizing: border-box;
  
          .item-image {
            width: .6rem;
            height: .6rem;
            float: left;
            margin-right: .15rem;
            margin-bottom: .2rem;
  
            ._img {
              width: .6rem;
              height: .6rem;
              display: block;
            }
          }
        }
  
        .time-line-container {
          color: #1DD8FE;
          font-size: .14rem;
          box-sizing: border-box;
          position: relative;
          top: .36rem;
          list-style: none;
          // margin: 0.5rem;
          padding-left: 53%;
  
          &::after {
            position: absolute;
            content: '';
            left: 48.5%;
            top: 0;
            width: 2px;
            height: 100%;
            background-color: #fe4f16;
          }
  
          .time-line-item {
            padding: 1rem;
            text-align: left;
            position: relative;
  
            .time-item-tag {
              position: absolute;
              left: -10rem;
              // width: 65px
              text-align: center;
              color: #5EBCF7;
              font-size: .14rem;
            }
  
            .time-item-symbol {
              box-sizing: border-box;
              position: absolute;
              left: -1rem;
              z-index: 1;
              background: white;
  
              .time-item-icon {
                box-sizing: border-box;
                position: absolute;
                margin-left: -.11rem;
                width: .24rem;
                height: .24rem;
                border-radius: .12rem;
                border: 2px solid #fe4f16;
              }
  
              .default {
                background: #51F7D6;
              }
  
              .warning {
                background: red;
              }
  
              .out {
                background: white;
              }
  
              .in {
                background: black;
              }
            }
  
            .time-item-content {
              white-space: pre-line;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
  
        .time-rfid {
          height: 100%;
          width: 100%;
          padding: .4rem .3rem .3rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .seamless-warp {
            width: 100%;
            height: 100%;
            overflow: hidden;
          }
          .list-rfid {
            color: #48ccd9;
  
            .item-rfid {
              height: .4rem;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: .12rem;
              .rfid-left {
                width: 1rem;
                margin-right: .1rem;
              }
  
              .rfid-center {
                width: .2rem;
                height: 100%;
                position: relative;
  
                .circle {
                  width: .2rem;
                  height: .2rem;
                  border-radius: 50%;
                  position: absolute;
                  top: 50%;
                  left: 0;
                  transform: translateY(-50%);
                }
  
                .out {
                  background: #F95304;
                }
  
                .in {
                  background: #088542;
                }
  
                .dynamic1 {
                  animation: scaleout1 1.3s infinite ease-in-out;
                }
  
                @keyframes scaleout1 {
                  0% {
                    box-shadow: 0 0 .08rem .06rem #08172c;
                  }
  
                  50% {
                    box-shadow: 0 0 .08rem .06rem #ff6633;
                  }
  
                  100% {
                    box-shadow: 0 0 .08rem .06rem #08172c;
                  }
                }

                .dynamic2 {
                  animation: scaleout2 1.3s infinite ease-in-out;
                }
  
                @keyframes scaleout2 {
                  0% {
                    box-shadow: 0 0 .08rem .06rem #08172c;
                  }
  
                  50% {
                    box-shadow: 0 0 .08rem .06rem #088542;
                  }
  
                  100% {
                    box-shadow: 0 0 .08rem .06rem #08172c;
                  }
                }
  
                .line {
                  height: 100%;
                  width: 2px;
                  background: #0154be;
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  margin: auto;
                  z-index: -1;
                }
              }
  
              .rfid-right {
                width: .8rem;
                text-align: left;
                margin-left: .1rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
  
        .archival-box {
          // padding-top: 40px;
          // padding-left: 30px;
          box-sizing: border-box;
        }
      }
  
      .have-bg {
        background: url('../frame2.png') no-repeat center;
        background-size: 100% 100%;
      }
    }
  
    .middle {
      flex: 1;
      margin-top: .4rem;
      // position relative
      box-sizing: border-box;
  
      .middle-show {
        // width 680px
        height: 4.44rem;
        position: relative;
        overflow: hidden;
  
        .middle-bg {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
  
        .run-days {
          margin: .3rem 0 0 .3rem;
  
          .run-text {
            font-size: .14rem;
            color: #388ca0;
            text-align: left;
          }
  
          .run-day-box {
            display: flex;
            justify-content: flex-start;
            align-items: baseline;
  
            .run-day-item {
              height: .48rem;
              line-height: .48rem;
              border: 1px solid #263f5b;
              box-sizing: border-box;
              text-align: center;
              color: #05bef6;
              font-size: .48rem;
              font-weight: bold;
              margin-right: .1rem;
            }
  
            .run-day-text {
              color: #388ca0;
              font-size: .14rem;
            }
          }
        }
  
        .scanning {
          width: 100%;
          height: 3rem;
  
          .radar {
            background: -webkit-radial-gradient(center, rgba(1, 84, 190, 0.3) 0%, rgba(1, 84, 190, 0) 75%), -webkit-repeating-radial-gradient(rgba(1, 84, 190, 0) 5.8%, rgba(1, 84, 190, 0) 18%, #0154be 18.6%, rgba(1, 84, 190, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(1, 84, 190, 0) 49.5%, #0154be 50%, #0154be 50%, rgba(1, 84, 190, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(1, 84, 190, 0) 49.5%, #0154be 50%, #0154be 50%, rgba(1, 84, 190, 0) 50.2%);
            // background radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%)
            width: 2.4rem;
            height: 2.4rem;
            max-height: 2.4rem;
            max-width: 2.4rem;
            position: relative;
            left: 30%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 0.2rem solid #0154be;
            overflow: hidden;
  
            &::before {
              content: ' ';
              display: block;
              position: absolute;
              width: 100%;
              height: 100%;
              border-radius: 50%;
              animation: blips 5s infinite;
              animation-timing-function: linear;
              animation-delay: 1.4s;
            }
  
            &::after {
              content: ' ';
              display: block;
              background-image: linear-gradient(44deg, rgba(1, 84, 190, 0) 50%, #0154be 100%);
              width: 50%;
              height: 50%;
              position: absolute;
              top: 0;
              left: 0;
              animation: radar-beam 5s infinite;
              animation-timing-function: linear;
              transform-origin: bottom right;
              border-radius: 100% 0 0 0;
  
              @keyframes radar-beam {
                0% {
                  transform: rotate(0deg);
                }
  
                100% {
                  transform: rotate(360deg);
                }
              }
  
              @keyframes blips {
                14% {
                  background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #0154be 30%, rgba(255, 255, 255, 0) 100%);
                }
  
                14.0002% {
                  background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #0154be 30%, rgba(255, 255, 255, 0) 100%);
                }
  
                25% {
                  background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #0154be 30%, rgba(255, 255, 255, 0) 100%);
                }
  
                26% {
                  background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #0154be 30%, rgba(255, 255, 255, 0) 100%);
                  opacity: 1;
                }
  
                100% {
                  background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #0154be 30%, rgba(255, 255, 255, 0) 100%);
                  opacity: 0;
                }
              }
            }
          }
        }
  
        .popup-warning {
          width: 2.04rem;
          height: 2.5rem;
          border: 1px solid #197899;
          background: #222;
          opacity: 0.5;
          position: absolute;
          top: 28%;
          left: 70%;
          transform: translateX(-50%);
          overflow: hidden;
          box-sizing: border-box;
  
          .e-text {
            .equip-warning {
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              font-size: .12rem;
              color: #48ccd9;
  
              .warning-icon {
                width: .24rem;
                height: .24rem;
              }
  
              .equip {
                width: 100%;
                height: .2rem;
                line-height: .2rem;
              }
  
              .equip-temp {
                width: 100%;
                height: .2rem;
                line-height: .2rem;
              }
  
              .create-time {
                width: .8rem;
                height: .2rem;
                line-height: .2rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
  
          .popup-box {
            float: left;
            width: 2rem;
            height: 2.5rem;
            margin-right: .1rem;
            border: 1px solid #197899;
            box-sizing: border-box;
          }
  
          .popup-box:nth-of-type(2) {
            margin-right: 0;
          }
        }
      }
  
      .middle-item {
        height: 3rem;
        display: flex;
        border: 1px solid #043778;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
  
        .tempt-box-one {
          padding-top: .4rem;
          box-sizing: border-box;
        }
  
        .tempt-box-two {
          padding-top: .4rem;
          box-sizing: border-box;
        }
      }
    }
  
    .right {
      padding-left: 0;
      padding-right: .2rem;
  
      .have-bg {
        background: url('../frame2.png') no-repeat center;
        background-size: 100% 100%;
      }
      .main {
        margin-left: 1rem;
      }
      .humidity {
        margin-left: .4rem;
      }
      .tp-value {
        flex: 1;
        padding-top: .3rem;
        margin-left:-2rem;
        .average-tp {
          font-size: .14rem;
        }
        .average-tp:nth-of-type(1) {
          font-size: .18rem;;
        }
        .average-tp:nth-of-type(odd) {
          color: #fe7174;
        }
        .average-tp:nth-of-type(even) {
          color: #095676;
          margin-bottom: .1rem
        }
        .average-hu {
          font-size: .14rem;;
        }
        .average-hu:nth-of-type(1) {
          font-size: .18rem;
          color: #20e8fb;
        }
        .average-hu:nth-of-type(odd) {
          color: #20e8fb;
        }
        .average-hu:nth-of-type(even) {
          color: #095676;
          margin-bottom: .1rem;
        }
      }
      .tp-b {
        margin-right: -.4rem;
      }
  
      .table-item {
        // padding-top 40px
        // padding-left 30px
        width: 100%;
        height: 100%;
        padding: .4rem .3rem .3rem .3rem;
        box-sizing: border-box;
  
        .v-table {
          width: 100%;
          height: 100%;
          border: 1px solid #0c3548;
          box-sizing: border-box;
          font-size: .14rem;
  
          .table-th {
            height: .4rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #2c91a9;
  
            .table-th-item {
              flex: 1;
            }
          }
  
          .table-body {
            height: 1.4rem;
            overflow: hidden;
            box-sizing: border-box;
  
            .table-body-item {
              border-bottom: 1px solid #0c3548;
              box-sizing: border-box;
  
              .table-con {
                height: .4rem;
  
                .item-ul {
                  height: 100%;
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
  
                  .item-li {
                    color: #2c91a9;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    flex: 1;
                  }
                }
  
                .even {
                  background: rgba(3, 42, 68, 0.5);
                }
  
                .odd {
                  background: rgba(3, 42, 68, 1);
                }
              }
            }
          }
        }
      }
    }
  }